<script>
import {ElMessage} from 'element-plus'
import ChineseDistricts from "@/assets/area";
import { ref } from "vue";
import img1 from "/src/assets/avatar.jpg";
import icon from "/src/assets/icon.png";
export default {
  data(){
    return {
      img1,icon,
      isAdopt:ref(false),   //是否为领养贴
      //isVisible:ref(false), //是否显示红星
      title:ref(""),  //标题

      contact_inf:ref(""),
      contact_type:ref(""),
      passage:ref(""),

      //选择省市
      province:[],
      shi1:[],
      city:[],
      block:[],
      pname:"",
      cname:"",

      //图片预览
      dialogVisible:ref(false),
      dialogImageUrl:ref(''),
      dialogWidth: 'auto',  // 初始宽度
      dialogHeight: 'auto',  // 初始高度

      //提交结果
      res:ref(null)
    }
  },
  methods:{
    // 选省市
    getCityData(){
      ChineseDistricts.forEach((item) => { // 使用箭头函数
        this.province.push({
          "id": item.code,
          "value": item.name,
          "children": item.cityList
        });
      });
    },
    // 选省
    choseProvince(e) {
      let that = this;
      that.city = [];
      that.block = [];
      that.cname = "";
      that.bname = "";
      for (var index2 in that.province) {
        if (e === that.province[index2].id) {
          that.shi1 = that.province[index2].children;
          that.pname = that.province[index2].value;

          that.shi1.forEach(function(citem) {
            that.city.push({
              id: citem.code,
              value: citem.name,
              children: citem.areaList
            });
          });
        }
      }
    },
    // toggleVisibility(){
    //   isVisible.value = !isVisible.value;
    // },

    // 头像点击
    avaClick(){
      console.log("avatar clicked!")
    },
// 搜索点击
//  searchClick  ()  {
//   this.headerComponent="Menu_3",
// },
    discoverClick(){
      this.$router.push({ name: 'MainPage'})
    },
    adoptClick(){
      this.headerComponent="Menu_2"
    },
    msgClick(){

    },
    sendClick  ()  {

    },
    toggleColor(){
      this.isAdopt = !this.isAdopt
    },
//  changeBtn  ()  {
//   tabBtn.value = tabBtn.value === "btn_1" ? "btn_2" : "btn_1";
// },

    //   发布按钮
    postHandle(){
      // 是领养贴
      if(this.isAdopt){
        if(this.title === ''){
          ElMessage({
            message: '请填写标题',
            type: 'error',
            style: 'font-size:25px;font-weight:bold;',
            center: true,
            offset: 55
          })
          this.res = false
        }

        if(this.contact_inf === ''){
          ElMessage({
            message: '请填写联系方式',
            type: 'error',
            style: 'font-size:25px;font-weight:bold;',
            center: true,
            offset: 55
          })
          this.res = false
        }
        if(this.contact_type === ''){
          ElMessage({
            message: '请选择联系方式类型',
            type: 'error',
            style: 'font-size:25px;font-weight:bold;',
            center: true,
            offset: 55
          })
          this.res = false
        }
        if(this.passage === ''){
          ElMessage({
            message: '请填写正文',
            type: 'error',
            style: 'font-size:25px;font-weight:bold;',
            center: true,
            offset: 55
          })
          this.res = false
        }

        if(this.title !== '' && this.contact_inf !== '' && this.contact_type !== '' && this.passage !== ''){
          this.title=''
          this.pname=''
          this.cname=''
          this.contact_inf=''
          this.contact_type=''
          this.passage=''
          this.isAdopt=false
          ElMessage({
            message: '发布成功',
            type: 'success',
            style: 'font-size:25px;font-weight:bold;',
            offset: 55
          })
          this.res = true
        }
      }
      // 不是领养贴
      else{
        if(this.title === ''){
          ElMessage({
            message: '请填写标题',
            type: 'error',
            style: 'font-size:25px;font-weight:bold;',
            center: true,
            offset: 55
          })
          this.res = false
        }
        if(this.passage === ''){
          ElMessage({
            message: '请填写正文',
            type: 'error',
            style: 'font-size:25px;font-weight:bold;',
            center: true,
            offset: 55
          })
          this.res = false
        }
        // 标题和正文都填写好
        if(this.title !== '' && this.passage !== ''){
          const flag = ref(false);
          if(!((this.contact_inf === '' && this.contact_type === '') || (this.contact_inf !== '' && this.contact_type !== ''))){
            this.contact_inf = ''
            this.contact_type = ''
            ElMessage({
              message: '请同时填写联系方式和联系方式类型或不填',
              type: 'error',
              style: 'font-size:25px;font-weight:bold;',
              center: true,
              offset: 55
            })
            flag.value=true
            this.res = false
          }
          if(flag.value === true){
            return
          }
          else{
            this.title=''
            this.pname=''
            this.cname=''
            this.contact_inf=''
            this.contact_type=''
            this.passage=''
            ElMessage({
              message: '发布成功',
              type: 'success',
              style: 'font-size:25px;font-weight:bold;',
              offset: 55
            })
            this.res = true
          }

        }
      }
    },
  },
  created(){
    this.getCityData()
  }
}
</script>
<template>
  <div class="layout" style="height:100vh;">
    <el-container>
      <!--图标 头像-->
      <el-header class="header" >
        <el-row
            justify="space-between"
            style="padding-top: 10px;padding-bottom: 10px">

          <!--图标icon-->
          <img :src="icon"
               style="width:55px;height:55px;"
               alt=""/>

          <!--头像-->
          <el-avatar
              :class="'avatar'"
              :src="img1"
              :fit="'cover'"
              :shape="'circle'"
              :size="55"
              @click="avaClick"
          />
        </el-row>

      </el-header>

      <el-container>
        <el-aside>
          <el-menu
              active-text-color="#FFD466"
              default-active="4"
          >
            <el-menu-item class="aside" index="1" @click="discoverClick">
              <el-icon :size="25" style="margin-right:10px;"><House /></el-icon>
              <span>发现</span>
            </el-menu-item>
            <el-menu-item class="aside" index="2" @click="adoptClick">
              <el-icon :size="25" style="margin-right:10px;"><Star /></el-icon>
              <span>领养</span>
            </el-menu-item>
            <el-menu-item class="aside" index="3" @click="msgClick">
              <el-icon :size="25" style="margin-right:10px;"><Message /></el-icon>
              <span>消息</span>
            </el-menu-item>
            <el-menu-item class="aside" index="4" @click="sendClick">
              <el-icon :size="25" style="margin-right:10px;"><CirclePlus /></el-icon>
              <span>发布</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <el-main>
          <div style="display: flex;flex-direction: column;align-items: stretch;gap: 10px;margin-left: 200px;margin-top:65px;">
            <el-row justify="start" style="margin-bottom: 10px;">
              <span style="color:red;margin-top:4px;margin-right:5px;">*</span>
              <input  class="titleInput"
                      v-model="title"
                      style="width: 250px;height:40px;font-size:16px;margin-right:15px;"
                      maxlength="15"
                      placeholder="请输入标题"
                      type="text"
              >

              <el-button class="toggleBtn"
                         :style="{backgroundColor:isAdopt ? '#FFD466':'#A6A6A6'}"
                         @click="toggleColor"
                         style="height:40px;font-size:16px;font-weight:bold;color:white;border:0;">
                领养贴
              </el-button>
            </el-row>


            <el-row style="margin-bottom: 10px;">
              <span :style="{color:isAdopt ? 'red' : 'white'}"
                    style="margin-right:5px;margin-top:9px;">*</span>

              <input
                     class="contactInput"
                     v-model="contact_inf"
                     style="width: 250px;height:40px;font-size:16px;margin-right: 15px;margin-top:5px;"
                     maxlength="20"
                     placeholder="请输入联系方式"
                     type="text"
              >

              <input  v-model="contact_type" value="1" type="radio" class="type1"><span style="margin-top: 15px;margin-right: 15px;">QQ</span>
              <input  v-model="contact_type" value="2" type="radio" ><span style="margin-top: 15px;margin-right: 15px;">微信</span>
              <input  v-model="contact_type" value="3" type="radio" ><span style="margin-top: 15px;margin-right: 15px;">电话</span>

            </el-row>

            <el-row>
              <span style="color:red;margin-right:5px;margin-top:2px;">*</span>
              <input  class="passageInput"
                      v-model="passage"
                      placeholder="请输入正文"
                      style="height:40px;width: 618px;font-size:16px;"
              >
            </el-row>

            <el-row justify="end" style="width:630px;">
              <el-button  class="sendBtn"
                          :="res"
                          @click="postHandle"
                          color="#FFD466"
                          style="font-size: 16px;font-weight:bold;color:white;height:40px;width:100px;">
                发 布</el-button>
            </el-row>
          </div>
        </el-main>


      </el-container>


    </el-container>
  </div>
</template>


<style scoped>

.el-avatar{
  cursor: pointer;
}
.el-menu{
  border:0!important;
}

/*header样式*/
.header{
  height:60px;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/*aside*/
.el-aside{
  margin-left: 10px;
  width:180px;
  height:calc(100vh - 70px);
  padding-top:23vh;
}
.aside{
  height:65px;
  font-size:18px;
  font-weight:bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep(.aside:hover){
  background-color: #FFE9B2;
}
/*领养贴按钮样式*/
.toggleBtn:hover{
  border:0;
}
/*省市选择样式*/
.select_item{
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  width:170px;
}

::v-deep(.el-select__selection ){
  font-size: 16px;

}
/*单选框样式*/
.el-radio /deep/ .el-radio__label {
  font-size: 16px;
}
.el-radio /deep/ .el-radio__inner {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

/*上传图片样式*/
.el-uploadDiv{
  width:650px;
  ::v-deep .el-upload--picture-card {
    width: 150px;
    position: relative;
    margin-right: 20px;
    /* 身份证样式*/
    ::v-deep .el-upload-list--picture-card .el-upload-list__item {
      width: 240px;
    }
  }
}

/*警示框样式*/
.el-message.error{
  --el-messagebox-font-size: 16px;
  font-size: 16px;
}
</style>


